<template>
<div>
  <div class="main clearfix">
    <nav-header></nav-header>
    <div class="layout-center">
      <div class="grid-c2">
        <div class="col-main">
          <!-- 如果是供应商，则展示此项 -->
          <div class="go" @click="toShopHome()" v-if="userRole == 'SELLER'"></div>
          <!-- 左侧菜单 -->
          <div class="item-left">
            <w-side-menu :menus='menus'></w-side-menu>
          </div>
          <!-- 右侧内容 -->
          <div class="item-right">
            <div class="cols">
              <keep-alive>
                <router-view></router-view>
              </keep-alive>
            </div>
          </div>
        </div>
      </div>
      <div style="clear:both;"> </div>
    </div>
  </div>
</div>
</template>

<script>
import header from './my/components/header.vue'
import { mapGetters } from 'vuex'
import { toShopUrl } from 'js/util'

export default {
  data() {
    return {
      menus: [
        {
          title: '我的订单',
          isShow: true,
          hasChild: false,
          link: '/my/order'
        },
        {
          title: '增值服务',
          isShow: true,
          hasChild: false,
          link: '/my/extra/'
        },
        {
          title: '我的收藏',
          isShow: true,
          hasChild: true,
          childs: [
            { title: '商品收藏', link: '/my/collectionShop' },
            { title: '店铺收藏', link: '/my/collectionStore' }
          ]
        },
        {
          title: '设置',
          isShow: true,
          hasChild: true,
          childs: [
            { title: '个人信息', link: '/my/personInfo' },
            { title: '地址管理', link: '/my/addressManager' },
            { title: '修改密码', link: '/my/updatePassword' }
          ]
        },
        {
          title: '我的足迹',
          isShow: false,
          hasChild: false,
          link: '/my/tracks'
        },
        {
          title: '退款管理',
          isShow: false,
          hasChild: false,
          link: '/my/refund'
        },
        {
          title: '消息',
          isShow: false,
          hasChild: false,
          link: '/my/message'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['userRole'])
  },
  components: {
    'nav-header': header
  },
  methods: {
    /**
     * 跳转到商家平台中心首页
     */
    toShopHome() {
      toShopUrl('/')
    }
  }
}
</script>

<style style lang="scss" scoped>
  .main {
    // padding-bottom: 20px;
  }
.layout-center {
  margin: 0 auto;
  width: 1230px;
  .grid-c2 {
    width: 100%;
    height: 100%;
    position: relative;
    left: 2px;
    clear: both;

    .col-main {
      float: left;
      width: 100%;
      padding-top: 20px;
      // padding-bottom: 40px;
      -webkit-transition: all ease-in-out .15s;
      transition: all ease-in-out .15s;

      .go {
        background: url('./../assets/go-pg.png');
        cursor: pointer;
        height: 60px;
        width: 1230px;
        margin-bottom: 10px;
      }
    }
  }

  .item-left {
    overflow: hidden;
    float: left;
    margin-right: 10px;
  }

  .item-right {
    position: relative;
    float: left;
    width: 1080px;
    .cols {
      width: 100%;
    }
  }
}
</style>

